<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>jquery select开放api</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="/css/combo.select.min.css">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="/js/jquery-select.min.js"></script>
</head>
<body>
<h2>测试jquery select开放api</h2>
<label for="test">Test:</label>
<select name="" id="test" style="width:300px">
    <option value="1" data-pinyin="hh">好好睡觉，不要再车造轮子了！</option>
    <option value="2" data-pinyin="wjsfj">我就是犯贱，你打我呀！</option>
    <option value="3">叫一只鸭</option>
    <option value="4">这是一只神奇的鸡</option>
    <option value="5">狗袋</option>
    <option value="6">王麻子</option>
    <option value="7">二狗</option>
</select>
<a id="me-me" class="btn btn-primary">点我获取value和text</a>
<div class="alert alert-success" role="alert" id="value-text">...</div>
<div class="alert alert-info" role="alert" id="text-text">...</div>
<script type="text/javascript">
    $(function () {
        var $mySel = $("#test").select({
            emptyMsg:'没有相关结果',
            onSelect:function(value,text,optData){
                console.log("value:"+value);
                console.log("text:"+text);
                if(optData){
                    console.log(optData.name);
                }

            }
        });
        $mySel.select('checked',2);
        $("#me-me").on('click',function(){
            var valHtml = "选 中 的 值："+$mySel.select("getValue")+"<br/>";
            var textHtml = "选中的文本："+$mySel.select("getText");
            $("#value-text").html(valHtml);
            $("#text-text").html(textHtml);
        });
    });
</script>
</body>
</html>